<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SUI Mobile Demo</title>
    <meta name="description" content="MSUI: Build mobile apps with simple HTML, CSS, and JS components.">
    <meta name="author" content="阿里巴巴国际UED前端">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="../favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">

    <!-- Google Web Fonts -->

    <!-- <link rel="stylesheet" href="../dist/css/sm.min.css"> -->
    <!-- <link rel="stylesheet" href="../dist/css/sm-extend.min.css"> -->
    <!-- <link rel="stylesheet" href="../assets/css/demos.css"> -->

    <!-- <link rel="apple-touch-icon-precomposed" href="../assets/img/apple-touch-icon-114x114.png"> -->
    <!-- <script src="../assets/js/jquery.min.js"></script> -->
    <!-- <script src="../assets/js/config.js"></script> -->
    <script>
      //ga
    </script>
    
  </head>
  <body>
<div class="page-group">
  <div class="page" id="page-index">
    <header class="bar bar-nav">
      <a class="icon icon-me pull-left open-panel" data-panel=".panel-left"></a>
      <a class="button button-link button-nav pull-right open-popup" data-popup=".popup-about">
        关于
        <span class="icon icon-menu"></span>
      </a>
      <h1 class="title">SUI Mobile</h1>
    </header>
    <div class="bar bar-standard bar-footer">
      <a class="icon icon-edit pull-left"></a>
      <a class="icon icon-settings pull-right open-panel" data-panel=".panel-right"></a>
    </div>
    
  <div class="content" id='page-index'>
    <div class="content-inner">
      <div class="content-block-title">示例</div>
      <div class="list-block">
        <ul>
          <li>
            <a href="./bar/index.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">标题栏和工具栏</div>
              </div>
            </a>
          </li>
          <li>
            <a href="./btns.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">按钮</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/form/index.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">表单</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/searchbar.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">搜索栏</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/list/index.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">列表</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/tabs/index.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">标签页</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/card/index.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">卡片</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/grid.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">栅格</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/modal.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">对话框</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/preloader.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">加载提示</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/actions.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">操作表</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/calendar.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">日历</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/picker.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">picker</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/datetime-picker.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">日期时间选择器</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/city-picker.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">省市区选择器</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/swiper.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">幻灯片</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/photo-browser.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">图片浏览器</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/pull-to-refresh.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">下拉刷新</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/infinite-scroll/index.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">无限滚动</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/routers/index.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">路由器</div>
              </div>
            </a>
          </li>
          <li>
            <a href="../demos/icons.html" class="item-link item-content">
              <div class="item-inner">
                <div class="item-title">图标</div>
              </div>
            </a>
          </li>
          <li>
              <a href="../demos/calendar-inline.html" class="item-link item-content">
                <div class="item-inner">
                  <div class="item-title">内联日历</div>
                </div>
              </a>
            </li>
            <li>
                <a href="../demos/panels.html" class="item-link item-content">
                  <div class="item-inner">
                    <div class="item-title">侧栏</div>
                  </div>
                </a>
              </li>
              <li>
                  <a href="../demos/one.html" class="item-link item-content">
                    <div class="item-inner">
                      <div class="item-title">跳转到下一个页面</div>
                    </div>
                  </a>
                </li>
              <li>
                  <a href="../demos/theme-dark.html" class="item-link item-content">
                    <div class="item-inner">
                      <div class="item-title">黑色主题</div>
                    </div>
                  </a>
                </li>
            <li>
              <a href="../demos/toast.html" class="item-link item-content">
                <div class="item-inner">
                  <div class="item-title">点击提示</div>
                </div>
              </a>
            </li>
            <li>
                <a href="../demos/structure.html" class="item-link item-content">
                  <div class="item-inner">
                    <div class="item-title">侧面滑动栏</div>
                  </div>
                </a>
            </li>
            <li>
              <a href="../demos/navigation.html" class="item-link item-content">
                <div class="item-inner">
                  <div class="item-title">导航页面</div>
                </div>
              </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="popup popup-about">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-right close-popup">
      关闭
    </a>
    <h1 class="title">关于SUI Mobile</h1>
  </header>
  <div class="content">
    <div class="content-inner">
      <div class="content-block">
        <p>SUI Mobile 是阿里巴巴共享业务事业部SDC团队（UED）提供的一套手机UI库。</p>
        <p>我们的目的是为手机千牛、百川以及任何手机端的H5页面提供标准的设计规范和前端实现。</p>
        <p>SUI Mobile并没有重新发明轮子，我们主要参考了 <a href='http://goratchet.com' external target='_blank'>ratchet</a> 和 <a href='http://framework7.taobao.org/' external target='_blank'>Framework7</a></p>
        <p>这里只是一个官方示例，详细文档请参考：<a href='http://m.sui.taobao.org/' external target='_blank'>http://m.sui.taobao.org/</a></p>
        <p></p>
        <p><a class="button close-popup">确定</a></p>
      </div>
    </div>
  </div>
</div>

<div class="panel-overlay"></div>
<!-- Left Panel with Reveal effect -->
<div class="panel panel-left panel-reveal">
  <div class="content-block">
    <p>这是一个侧栏</p>
    <p></p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">关闭</a></p>
  </div>
</div>
<div class="panel panel-right panel-cover">
  <div class="content-block">
    <p>这是右侧栏，panel-cover模式</p>
    <p></p>
    <!-- Click on link with "close-panel" class will close panel -->
    <p><a href="#" class="close-panel">关闭</a></p>
  </div>
</div>


    </div>
    <!-- <script src="../dist/js/sm.js"></script> -->
    <!-- <script src="../dist/js/sm-extend.js"></script> -->
    <!-- <script src="../dist/js/sm-city-picker.js"></script> -->
    <!-- <script src="../assets/js/demos.js"></script> -->
    
  </body>
</html>
